<template>
   <!--表格数据-->
   <el-row type="flex" justify="center">
      <el-col :span="17">
         <el-table ref="tableRef" :data="table.data" border @selection-change="mSelectionChange" row-key="rowID"
                   v-loading="table.showLoading">
            <!-- 选择列 -->
            <el-table-column type="selection" reserve-selection width="55" align="center"
                             fixed="left">
            </el-table-column>
            <!-- 序号 -->
            <el-table-column width="60" label="序号" align="left" type="index"
                             fixed="left"></el-table-column>
            <!-- 数据列 -->
            <template v-for="(item, index) in table.column">
               <el-table-column :prop="item.prop" :label="item.label"
                                :show-overflow-tooltip="true"></el-table-column>
            </template>
            <!-- 操作列 -->
            <el-table-column label="采购数量" align="left" fixed="right">
               <template #default="scope">
                  <el-button type="primary" @click="mAddQty(scope.row)">
                     +
                  </el-button>
                  <el-button type="primary" link>
                     {{ scope.row.buyQty }}
                  </el-button>
                  <el-button type="primary" @click="mSubQty(scope.row)">
                     -
                  </el-button>
               </template>
            </el-table-column>
         </el-table>
      </el-col>
   </el-row>
   <!--分页栏-->
   <el-row type="flex" justify="center" style="margin-top: 10px;">
      <el-pagination background :layout="pager.layout" :current-page="pager.pageIndex"
                     :page-size="pager.pageSize" :total="pager.rowCount"
                     @current-change="mPageIndexChange"></el-pagination>
   </el-row>
   <el-row type="flex" justify="center" style="margin-top: 40px;">
      <el-col :span="8">
         <el-form :model="orderData" ref="orderRef" label-width="100px">
            <el-form-item label="订单总金额" prop="totalMoney">
               <el-input v-model="orderData.totalMoney" disabled></el-input>
            </el-form-item>
            <el-form-item label="收货人" prop="receiveUser"
                          :rules="[{ required: true, message: '不能为空'}]">
               <el-input v-model="orderData.receiveUser"></el-input>
            </el-form-item>
            <el-form-item label="收货电话" prop="receivePhone"
                          :rules="[{ required: true, message: '不能为空'}]">
               <el-input v-model="orderData.receivePhone"></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="receiveAddress"
                          :rules="[{ required: true, message: '不能为空'}]">
               <el-input v-model="orderData.receiveAddress"></el-input>
            </el-form-item>
            <div style="text-align: center; margin-bottom: 20px; ">
               <el-button @click="mSubmitOrder">确认下单</el-button>
            </div>
         </el-form>
      </el-col>
   </el-row>

</template>
<script>
import axiosUtil from "@/utils/axiosUtil";

export default {
   data() {
      return {
         orderData: {
            totalMoney: '0',
            receiveUser: '',
            receivePhone: '',
            receiveAddress: ''
         },
         //表格数据和表格展示列定义
         table: {
            data: [],
            column: [
               {'prop': 'bookCode', 'label': '图书编号'},
               {'prop': 'bookName', 'label': '图书名称'},
               {'prop': 'sellPrice', 'label': '销售价格'},
            ],
            //选中行
            mulSelection: [],
            showLoading: false
         },
         //表格分页数据定义
         pager: {
            pageIndex: 1,
            pageSize: 5,
            layout: 'total, prev, pager, next, jumper',
            rowCount: 0,
         }
      }
   },

   methods: {
      //购物车下单
      mSubmitOrder() {
         this.$refs['orderRef'].validate(valid => {
            if (valid) {
               //获取勾选图书编号列表
               const bookCodeList = []
               if (this.table.mulSelection) {
                  this.table.mulSelection.forEach((item, index) => {
                     bookCodeList[index] = item.bookCode
                  })
               }
               //如果已勾选图书，则调用购物车下单
               if (bookCodeList.length > 0) {
                  axiosUtil.postForm({
                     url: '/orderInfo/shopOrder',
                     data: {
                        bookCodeList: bookCodeList,
                        receiveUser: this.orderData.receiveUser,
                        receivePhone: this.orderData.receivePhone,
                        receiveAddress: this.orderData.receiveAddress
                     },
                     success: res => {
                        this.$message.info('下单成功')
                     }
                  })
               } else {
                  this.$message.info('请选择图书')
               }
            }
         })
      },
      //搜索数据
      mSearchData() {
         axiosUtil.get({
            url: '/shopping/getTable',
            data: {
               pageIndex: this.pager.pageIndex,
               pageSize: this.pager.pageSize
            },
            success: res => {
               this.table.data = res.data.table;
               this.pager = res.data.pager;
               //清空选择
               this.$refs['tableRef'].clearSelection();
            }
         })
      },
      //加数量
      mAddQty(row) {
         axiosUtil.postForm({
            url: '/shopping/addQty',
            data: {bookCode: row.bookCode},
            success: res => {
               this.mSearchData();
            }
         })
      },
      //减数量
      mSubQty(row) {
         axiosUtil.postForm({
            url: '/shopping/subQty',
            data: {bookCode: row.bookCode},
            success: res => {
               this.mSearchData();
            }
         })
      },
      //勾选选择
      mSelectionChange(val) {
         this.table.mulSelection = val
         //计算勾选商品的总金额
         this.orderData.totalMoney = 0;
         this.table.mulSelection.forEach((item, index) => {
            this.orderData.totalMoney += item.buyQty * item.sellPrice;
         })
      },
      //换页切换
      mPageIndexChange(val) {
         this.pager.pageIndex = val;
         this.mSearchData();
      }
   },
   created() {
      //搜索购物车数据
      this.mSearchData();
   }
}
</script>
<style>
</style>
